<template>
	<view class="container">
		<view class="" style="display: flex;flex-direction: row;">
			<view class="" style="width: 250rpx; background-color: white; padding: 30rpx;height: 1300rpx">
				<view class="" v-for="(item,index) in type"
					style=" margin-top: 20rpx;padding: 20rpx; font-size: 30rpx;border: solid 1rpx;display: flex;align-items: center;justify-content: center;">
					{{item}}
				</view>
			</view>
			<view class="" style="width: 500rpx;height: 300rpx;">
				<uni-grid :column="3" :showBorder="false">
					<uni-grid-item v-for="(item,index) in gridImages">
						<view class="" style="display: flex;flex-direction: column;align-items: center;">
							<image :src="item" mode="scaleToFill"
								style="width: 90rpx;height: 90rpx; border-radius: 100%	;">
							</image>
							<text>{{gridNames[index]}} </text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script setup>
	const gridImage = "http://q.qlogo.cn/headimg_dl?dst_uin=2528152223&spec=640&img_type=jpg"
	const name = "示例"
	// 选项栏
	const type = ["全部服务","翻译服务", "健康档案", "紧急救助", "陪同人", "问医生", "医院导航", "用户评价", "预约", "支付功能", "咨询"]
	// 图标图片
	const gridImages = ["/static/index_image/翻译服务.png", "/static/index_image/健康档案.png", "/static/index_image/紧急救助.png",
		"/static/index_image/陪同人.png", "/static/index_image/问医生.png", "/static/index_image/医院导航.png",
		"/static/index_image/用户评价.png",
		"/static/index_image/预约.png", "/static/index_image/支付功能.png",
		"/static/index_image/咨询.png"
	]
	// 图标名称
	const gridNames = ["翻译服务", "健康档案", "紧急救助", "陪同人", "问医生", "医院导航", "用户评价", "预约", "支付功能", "咨询"]
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>